<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<link href="/static/layui/css/layui.css" rel="stylesheet">
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<!-- 引入 layui.js -->
		<script src="/static/layui/layui.js"></script>
		<style>
			.demo-login-container {
				width: 320px;
				margin: 210px auto 0;
			}
			.demo-login-other .layui-icon {
				position: relative;
				display: inline-block;
				margin: 0 2px;
				top: 2px;
				font-size: 26px;
			}
		</style>
	</head>
	<body>
		<div style="display: block;" id="login">
			<form class="layui-form">
				<div class="demo-login-container">
					<div class="layui-form-item">
						<div class="layui-input-wrap">
							<div class="layui-input-prefix">
								<i class="layui-icon layui-icon-username"></i>
							</div>
							<input type="text" name="account_number" value="" lay-verify="required"
								placeholder="账号" lay-reqtext="请填写账号" autocomplete="off"
								class="layui-input" lay-affix="clear" value="admin1">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-wrap">
							<div class="layui-input-prefix">
								<i class="layui-icon layui-icon-password"></i>
							</div>
							<input type="password" name="password" value="" lay-verify="required"
								placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off"
								class="layui-input" lay-affix="eye" value="123456">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-row">
							<div class="layui-col-xs7">
								<div class="layui-input-wrap">
									<div class="layui-input-prefix">
										<i class="layui-icon layui-icon-vercode"></i>
									</div>
									<input type="text" name="vercode" value="" lay-verify="required"
										placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off"
										class="layui-input" lay-affix="clear">
								</div>
							</div>
							<div class="layui-col-xs5">
								<div style="margin-left: 10px;">
									<img src="{:url('Login/verify')}" alt="captcha" width="120" height="40"id="captcha_img" onclick="refreshCaptcha()" />
								</div>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<button class="layui-btn layui-btn-fluid" lay-submit
							lay-filter="demo-login">登录</button>
					</div>
					<div class="layui-form-item demo-login-other">
					      <label>还没有账号，请点击：</label>
					     <a href="{:url('Login/register')}">注册帐号</a>
					</div>
				</div>
			</form>
			<div style="position: absolute;bottom: 0px;width:100%;height: 40px;background-color: gainsboro;line-height: 40px;text-align: center;">
				备案号：<a href="https://beian.miit.gov.cn/" target="_blank">12345678</a>
			  </div>
		</div>
		<script type="text/javascript">
		layui.use(['element', 'form'],function(){
		  var element = layui.element;
		  var form = layui.form;
		  var layer = layui.layer;
			form.on('submit(demo-login)', function(data) {
					//var field = data.field; // 获取表单字段值
					$.ajax({
						type: 'post',
						url: '{:url("Login/loginData")}', // 假设表单有action属性
						data: data.field, // 自动序列化表单元素为字符串
						dataType:'json',
						success: function(data) {
							if (data.code == 200) {
								layer.msg(data.msg, {
									time: 500
								}, function() {
									window.location.href= "{:url('Index/index')}"
								});
							} else {
								layer.msg(data.msg, {
									time: 6000
								});
								refreshCaptcha();
							}
						}
					});
					return false; // 阻止默认 form 跳转
			}); 
				
			
		});
		function refreshCaptcha() {
			$('#captcha_img').attr('src', '{:url("Login/verify")}?' + Math.random());
		}
		</script>
	</body>
</html>